 <template>
  <div>
    <div class="left_center" ref="right">
      <div>
        <div class="banner">
          <div class="imgs">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="(item, index) in imgs" :key="index">
                <img :src="item.pic" alt="" />
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <div class="remlist">
          <div class="title">推荐歌单</div>
          <div class="content">
            <ul>
              <li
                v-for="(item, index) in personalized"
                :key="index"
                @click="recommendlist(item.id)"
              >
                <div class="img">
                  <img :src="item.picUrl" alt="" />
                </div>
                <span
                  ><i class="iconfont icon-headset"></i
                  >{{ item.playCount | playCountNum }}</span
                >
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="likelist">
          <div class="title">猜你喜欢</div>
          <div class="content" ref="like">
            <ul>
              <li v-for="(item, index) in likelist" :key="index">
                <div class="img" @click="likeSong(item.id)">
                  <img :src="item.picUrl" alt="" />
                </div>
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="likelist" v-if="views">
          <div class="title" @click="mycolle">
            我的收藏 <span class="iconfont icon-aixin1"></span>
          </div>
          <div class="content" ref="like">
            <ul>
              <li v-for="(item, index) in collList" :key="index">
                <div class="img" @click="likeSong(item.id)">
                  <img :src="item.al.picUrl" alt="" />
                </div>
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>
        </div>

        <div class="newsong">
          <div class="title">最新音乐</div>
          <div
            class="everysong"
            v-for="(item, index) in likelist"
            :key="index"
            @click="newMuic(item.id, index)"
          >
            <div class="songMsg">
              <h2>{{ item.name }}</h2>
              <h3>
                <span v-for="(key, i) in item.song.artists" :key="i">
                  {{ key.name }}
                  <!-- <span v-for="">/</span> -->
                </span>
              </h3>
            </div>
            <div class="songPlay">
              <span
                :class="[
                  'iconfont',
                  iconplay1 != index ? 'icon-bofang' : 'icon-tianchongxing-',
                  'center',
                ]"
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner, getPersonalized } from "../api/recommend";
import BScroll from "@better-scroll/core";
import { getNewSong } from "../api/newsong.js";

export default {
  props: ["collList", "views"],
  data() {
    return {
      imgs: null,
      personalized: null,
      listAll: [],
      iconplay1: null,
      likelist: [],
      flag: true,
    };
  },
  methods: {
    recommendlist(id) {
      // console.log("歌单的歌id", id);
      this.$router.push({ path: "/rank/ranklist", query: { id: id } });
    },
    getBannerFn() {
      getBanner().then((data) => {
        if (data.code == 200) {
          this.imgs = data.banners;
        }
      });
    },
    mycolle() {
      this.$router.push("/collection");
    },
    getPersonalizedFn() {
      getPersonalized({ limit: 6 }).then((data) => {
        // console.log(data);
        if (data.code == 200) {
          // this.imgs= data.banners;
          this.personalized = data.result;
        }
      });
    },
    // 滚动效果初始化方法
    _initScroll(dom, flagx, flagy) {
      // 右侧滚动效果初始化
      // this.rights = new BScroll(this.$refs.right, {
      this.rights = new BScroll(dom, {
        click: true, //点击触发
        probeType: 3, //深针的效果，时时获取滚动高度
        scrollX: flagx,
        scrollY: flagy,
      });
      // console.log(this.$refs.right);
    },
    likeSong(id) {
      this.$emit("likeSong", { id: id, newMuics: true });
      this.iconplay1 = null;
    },
    newMuic(id, index) {
      if (this.iconplay1 == index) {
        this.iconplay1 = null;
        this.flag = true;
      } else {
        this.iconplay1 = index;
        this.flag = false;
      }
      // console.log( "1",this.iconplay1);
      // console.log("2", this.flag );
      this.$emit("newMuic", { id: id, newMuics: this.flag });
    },
  },
  filters: {
    playCountNum(value) {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万";
      return y;
    },
  },
  created() {
    this.getBannerFn();
    this.getPersonalizedFn();
    getNewSong({ limit: 15 }).then((data) => {
      // console.log("喜欢的",data);
      this.likelist = data.result;
      // console.log("喜欢的", data.result);
    });
  },
  // 页面挂载后生命周期函数
  // 引入第三方js库
  // vue页面加载慢，第三方js库提前加载问题?
  // vm.$nextTick() 方法 保证vue执行完，页面挂载数据后，再执行第三方库
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this._initScroll(this.$refs.right, false, true);
        this._initScroll(this.$refs.like, true, false);
      }, 3000);
    });
  },
};
</script>

<style lang="less" >
.left_center {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
  width: 100%;
  // 这里设置定位和高度是为了让这个元素的高度等于页面的高度减去top值的高度
  // 注意一定要设置底部为0
  position: absolute;
  top: 80px;
  bottom: 0px;
  // 这是为了滚动时隐藏溢出
  overflow: hidden;
}
.banner {
  width: 100%;
  text-align: center;
  position: relative;
  // height: 134px;
  // background-color: #d4473c;
  // margin-bottom: 32px;
  &::after {
    background-color: #d4473c;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 132px;
    content: "";
    display: block;
  }
  .imgs {
    min-height: 100px;
    width: 96%;
    height: 165px;
    margin: 0 auto;
    // background-color: yellow;
    border-radius: 5px;
    overflow: hidden;
    .my-swipe {
      // height: 165px;
      min-height: 100px;

      img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        border-radius: 5px;
      }
    }
  }
}
.remlist {
  .title {
    height: 60px;
    line-height: 60px;
    padding-left: 5px;
    font-size: 16px;
    color: #000;
    font-size: 700;
  }
  .content {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      li {
        flex: 0 0 30%;
        position: relative;
        span {
          position: absolute;
          top: 0;
          right: 0;
          color: #fff;
          font-size: 12px;
          i {
            font-size: 20px;
            vertical-align: middle;
          }
        }
        .img {
          // background-color: skyblue;
          min-width: 50px;
          // height: 100px;
          width: 100%;
          border-radius: 3px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        p {
          font-size: 12px;
          color: #565658;
          line-height: 15px;
          padding: 5px 5px 0;
          margin-bottom: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
.likelist {
  // position: relative;
  .title {
    height: 60px;
    line-height: 60px;
    padding-left: 5px;
    font-size: 16px;
    color: #000;
    // font-weight: 700;
    .icon-aixin1 {
      color: red;
      font-size: 20px;
      vertical-align: middle;
    }
  }
  .content {
    width: 100%;
    overflow: hidden;

    ul {
      display: flex;
      flex-wrap: nowrap;
      width: 200%;
      li {
        flex: 0 0 7rem;
        position: relative;
        margin-left: 10px;
        span {
          position: absolute;
          top: 0;
          right: 0;
          color: #fff;
          font-size: 12px;
          i {
            font-size: 20px;
            vertical-align: middle;
          }
        }
        .img {
          // background-color: skyblue;
          min-width: 50px;
          // height: 100px;
          width: 100%;
          border-radius: 3px;
          overflow: hidden;
          img {
            width: 100%;
            border-radius: 50%;
          }
        }
        p {
          font-size: 12px;
          color: #565658;
          line-height: 15px;
          padding: 5px 5px 0;
          margin-bottom: 15px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
.newsong {
  .title {
    height: 60px;
    line-height: 60px;
    padding-left: 5px;
    font-size: 16px;
    color: #000;
    font-size: 700;
  }
  .everysong {
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f3;
    padding: 10px;
    // padding-left: 10px;
    // padding-right: 10px;
    .songMsg {
      font-size: 17px;
      h2 {
        font-size: 16px;
        // margin-top: 10px;
      }
      h3 {
        font-size: 12px;
        color: #888;
      }
    }
    .songPlay {
      .iconfont {
        font-size: 22px;
        color: #aaa;
        margin-top: 10px;
        display: inline-block;
      }
    }
  }
}
</style>